<template>
  <div id="musicList" class="page">
    <div class="content">
        <el-tabs tab-position="left"  @tab-click="change" >
          <el-tab-pane label="推荐歌单" style="margin-top:20px;">
            <div class="content" v-for="(item,index) in list" :key="index">
                <div style="width:150px; height:150px;">
                  <a href="/singleList" @click="gotoDetails(item)">
                    <img :src="item.coverImgUrl" :title="item.name" width="100%" class="image">
                  </a>
                </div>
                <div style="margin-left:20px;">
                    <p>
                      <a href="/singleList" @click="gotoDetails(item)">{{item.name}} </a>
                      <span style="float:right;">制作人：{{item.creator.nickname}}</span>
                    </p>
                    <p class="description">{{item.description}}</p>
                    <el-button type="primary" @click="playAll(item)">全部播放</el-button>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="最新歌单" style="margin-top:20px;">
            <div class="content" v-for="(item,index) in list" :key="index">
              <div style="width:150px; height:150px;">
                <a href="/singleList" @click="gotoDetails(item)">
                  <img :src="item.coverImgUrl" :title="item.name" width="100%" class="image">
                </a>
              </div>
              <div style="margin-left:20px;">
                <p>
                  <a href="/singleList" @click="gotoDetails(item)">{{item.name}} </a>
                  <span style="float:right;">制作人：{{item.creator.nickname}}</span>
                </p>
                <p class="description">{{item.description}}</p>
                <el-button type="primary">全部播放</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="最热歌单" style="margin-top:20px;">
            <div class="content" v-for="(item,index) in list" :key="index">
              <div style="width:150px; height:150px;">
                <a href="/singleList" @click="gotoDetails(item)">
                  <img :src="item.coverImgUrl" :title="item.name" width="100%" class="image">
                </a>
              </div>
              <div style="margin-left:20px;">
                <p>
                  <a href="/singleList" @click="gotoDetails(item)">{{item.name}} </a>
                  <span style="float:right;">制作人：{{item.creator.nickname}}</span>
                </p>
                <p class="description">{{item.description}}</p>
                <el-button type="primary">全部播放</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import StorageUtil from "../../utils/StorageUtil";

export default {
  name: "musicList",
  data(){
      return{
          list:[],
      }
  },
  methods:{
      getRecommendMusicList(index){
          if(index == 0){
              this.$get("https://autumnfish.cn/top/playlist/highquality").then(result => {
                  this.list = result.playlists;
              });
              return;
          }else if(index == 1){
            this.$get("https://autumnfish.cn/top/playlist?order=new").then(result => {
              console.log(result);
            });
            return;
          }
        this.$get("https://autumnfish.cn/top/playlist?order=hot").then(result => {
          this.list = result.playlists;
        });
      },
    change(item){
        this.getRecommendMusicList(item.index);
    },
    gotoDetails(item){
      console.log(item);
      StorageUtil.session.setItem("singDetails",item);
    },
    playAll(item){
      this.$get("https://autumnfish.cn/search?keywords=" + item.name).then(result => {
          let arrays = [];
          result.result.songs.forEach(item => {
              let names = "";
              item.artists.forEach(e => {names += e.name});
              arrays.push({
                  singName:item.name,
                  singerName:names,
                  singId:item.id,
              })
          });
          StorageUtil.local.setItem("playList",arrays);
          this.$router.push({path:'/play'});
      })
    }
  },
  created() {
      this.getRecommendMusicList(0);
  }
}
</script>

<style scoped>
  .description{
    height:60px;
    width:710px;
    color:gray;
    font-size:14px;
    margin:10px 0px;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-tab-pane .content{
     margin-bottom: 10px;
  }
</style>
